import classNames from 'classnames';
import { useState } from 'react';
import { Overlay } from 'react-vant';

import CloseIcon from '@/assets/close-1.png';
import Bg from '@/assets/rule-bg.png';

export default function useRules() {
  const [visible, setVisible] = useState<boolean>(false);

  function renderNode() {
    return (
      <Overlay
        zIndex={999}
        visible={visible}
        className="flex justify-center items-center flex-col"
      >
        <div
          style={{
            backgroundImage: `url(${Bg})`,
          }}
          className={classNames(
            'w-[678px] h-[1120px] bg-cover relative left-[26px] text-white text-sm pt-[200px] pl-[32px] pr-[74px] pb-[50px]',
          )}
        >
          <i
            style={{
              backgroundImage: `url(${CloseIcon})`,
            }}
            className={classNames(
              'w-[74px] h-[74px]  bg-cover absolute right-10 top-8 active:scale-95',
            )}
            onClick={() => {
              setVisible(false);
            }}
          />
          <div className=" h-full overflow-auto text-sm">
            <p>活动时间：</p>
            <p>2023年9月6日00：00至2023年11月30日23:59</p>
            <p>活动主办方：</p>
            <p>中美天津史克制药有限公司</p>
            <p>
              活动期间，凡成功登陆
              “百多邦敢疯狂人格测试”H5互动页面并完成测试内容，即有机会获得由活动主办方提供的上海迪士尼门票（2张）、敢疯狂周边（500份）、百多邦产品优惠券（20000张），数量有限，先到先得。
            </p>
            <br />
            <p>活动参与流程： </p>
            <p>
              9月6日-11月30日，用户进入活动页面，完成百多邦敢疯狂人格测试后，即可参与抽奖，将海报分享好友且好友完成H5人格测试内容后，即可增加一次抽奖机会。
            </p>
            <p>注：每个ID最多每天可享有5次抽奖机会。</p>
            <br />
            <p>
              中奖后，在当前H5兑奖页面填写您的个人姓名、电话及收件地址，点击确认提交，请确保您填写的信息正确无误，以便将奖品邮寄到您的手中，提交信息即为认可本次信息授权。本次活动的实体奖品，即敢疯狂周边和迪士尼门票，将于活动结束后30个工作日内，以快递形式陆续寄出，产品优惠券请
              系统所提供的优惠券券码，前往叮当快药APP进行核销。
            </p>
            <p>如有疑问，可联系“百多邦Bactroban”微信公众号。</p>
            <br />
            <p>【注意事项】 </p>
            <p>
              本次活动所有实体奖品质量由太意广告（上海）有限公司全权负责，中奖者如有任何疑问或在奖品使用过程中产生任何争议，中奖者应单独与该供应商协商或通过法律途径解决，活动主办方对此不予负责。
              我们不会与任何无关第三方分享您的信息。
            </p>
            <br />
            <p>
              本人已阅读并理解本次活动细则全部内容，同意遵守该活动细则，并且自愿放弃就奖品质量问题向活动主办方索赔的任何相关权利。
            </p>
            <p>本次活动最终解释权归主办方-中美天津史克制药有限公司所有。</p>
          </div>
        </div>
      </Overlay>
    );
  }

  return {
    open: function () {
      setVisible(true);
    },
    renderNode,
  };
}
